<template>
    <div class="page">
      <div class="list">
        <div>
        <el-input v-model="seach" @input="Seach" placeholder="搜索"></el-input>
        </div>
          <div class="li" v-for="item in dataList" :key="item._id">
            <div class="li-info">
                  <div class="li-label">账号:</div>
                  <div class="li-txt">{{item.username}}</div>
              </div>
              <div class="li-info">
                  <div class="li-label">K宝账号:</div>
                  <div class="li-txt">{{item.account}}</div>
              </div>
              <div class="li-info">
                  <div class="li-label">K宝密码:</div>
                  <div class="li-txt">{{item.password}}</div>
              </div>
              <div class="li-info">
                  <div class="li-label">K宝支付密:</div>
                  <div class="li-txt">{{item.payPassword}}</div>
              </div>
              <div class="li-info">
                  <div class="li-label">出售状态: </div>
                  <el-select v-model="item.status" placeholder="请选择" @change="(val)=>changeStatus(val, item)">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                 </el-select>
              </div>
          </div>
      </div>
      <el-dialog
  title=""
  :visible.sync="dialogVisible"
  width="100%"
  :before-close="handleClose">
              <div class="li-info">
                  <div class="li-label">K宝账号:</div>
                  <div class="li-txt">{{diaItem.account}}</div>
              </div>
              
</el-dialog>
    </div>
</template>
  
  <script>
  import comm from "@/mixins/comm.js";
  export default {
      mixins: [comm],
      data() {
          return {
              dialogVisible: false,
              diaItem: {},
              dataList: [],
              initdataList: [],
              seach: "",
              options: [{
          value: '1',
          label: '出售中'
        }, {
          value: '2',
          label: '出售成功'
        },{
          value: '3',
          label: '出售失败'
        }],
 
          }
    },
      
      async created() {
          let res = await this.$awaitApi("queryAccountAll")
          this.dataList = res.data.items
          this.initdataList = res.data.items
    },
    methods: {
        handleClose() {
            this.dialogVisible = false
        },
        viewD(item) {
            this.dialogVisible = true
            this.diaItem = item
        },
        async changeStatus(value,item) {
            let data = {
                status: value,
                id: item._id
            }
            await this.$awaitApi("setStatus", data)
        },
        Seach() {
            this.dataList = this.initdataList.filter(e => {
                return e.username.indexOf(this.seach) != -1
            })
        }
      }
  }
  </script>
  
  <style lang="less" scoped>
  .list {
      padding: 10px;
      margin-bottom: 40px;
      .title {
      }
      .li {
          background-color: #fff;
          box-shadow: 0 0 18px 0 rgba(0,0,0,.06);
          border-radius: 10px;
          padding: 10px;
          margin-top: 10px;
          .li-info {
              display: flex;
              margin: 5px 0;
              align-items: center;
              .li-label {
                  width: 90px;
                  text-align: right;
              }
              .li-txt {
                  margin-left: 20px;
                  
              }
          }
      }
  }
  .li-info {
              display: flex;
              margin: 5px 0;
              align-items: center;
              .li-label {
                  width: 90px;
                  text-align: right;
              }
              .li-txt {
                  margin-left: 20px;
                  
              }
          }
  </style>